<template>
    <div class="cart">
        <navbar class="cartnav">
            <template #leftnav>
                <img src="@/assets/img/home/back.png" alt="" v-show="sumtotal" @click="detailback">
            </template>
            <template #centernav>
                购物车({{sumtotal}})
            </template>
        </navbar>
        <bscorll :prototype='3' ref="cartbscoll" class="content1">
            <cartlist></cartlist>
        </bscorll>
        <carfoot @gopay="gopay" v-show="sumtotal" class="catfooter"></carfoot>
        <toast message="购买成功" :toisshow="toisshow"></toast>
    </div>
</template>

<script>
import navbar from '@/components/common/navbar/NavBar.vue'
import cartlist from './childcomps/cartlist'
import bscorll from "@/components/common/bscoll/Scorll"
import carfoot from './childcomps/carfoot'
import toast from '@/components/common/toast/toast'
import {mapGetters} from 'vuex'
export default {
    components:{
        navbar,
        cartlist,
        bscorll,
        carfoot,
        toast
    },
    computed:{
        ...mapGetters(['sumtotal'])
    },
    data() {
        return {
            num:0,
            toisshow:false
        }
    },
    created()  {
       this.$nextTick(()=>{
           this.$refs.cartbscoll.bscoll.refresh()
       })
    },
    updated() {
        this.$refs.cartbscoll.bscoll.refresh()
    },
    methods: {
      detailback(){
          this.$router.replace('/home')
      },
      gopay(){
          this.toisshow = true
          setTimeout(()=>{
              this.toisshow = false
          },2000)
      }
    },
}
</script>

<style scoped>
.cartnav{
    background-color: deeppink;
    color: #fff;
    font-size: 18px;
}
.cart{
   height: 100vh;
}

 .cart .content1{
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
.catfooter{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}
</style>